<template>
  <div>
    <table border="1" width="700" style="border-collapse: collapse">
      <caption>
        购物车
      </caption>
      <thead>
        <tr>
          <th><input type="checkbox" v-model="isAll" /> <span>全选</span></th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>总价</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <ZuoYe1
          v-for="(item, index) in goodList"
          :key="index"
          :obj="item"
          @changeNum="item.num = $event"
          @del="del"
          @changeCheck="all"
        ></ZuoYe1>
      </tbody>
      <tfoot>
        <tr>
          <td>合计:</td>
          <td colspan="5">{{ total }}</td>
        </tr>
      </tfoot>
    </table>
    <div>
      <h3>测试题</h3>
      <MySubject
        v-for="(item, index) in arrRandom"
        :key="index"
        :obj="item"
        @tijiao="item.sum = $event"
      ></MySubject>
      <div>
        <MyFlag
          v-for="(item, index) in arrRandom"
          :key="index"
          :obj="item"
          :index="index"
        ></MyFlag>
      </div>
    </div>
  </div>
</template>

<script>
import ZuoYe1 from "@/components/ZuoYe1.vue";
import MySubject from "@/components/MySubject.vue";
import MyFlag from "@/components/MyFlag.vue";
export default {
  created() {
    const arrRandom = [];
    for (let i = 0; i < 5; i++) {
      const left = Math.floor(Math.random() * 11);
      const right = Math.floor(Math.random() * 11);
      arrRandom.push({ left, right, sum: null });
    }
    this.arrRandom = arrRandom;
  },
  data() {
    return {
      goodList: [
        {
          name: "诸葛亮",
          price: 1000,
          num: 1,
          checked: false,
        },
        {
          name: "蔡文姬",
          price: 1500,
          num: 1,
          checked: false,
        },
        {
          name: "妲己",
          price: 2000,
          num: 1,
          checked: false,
        },
        {
          name: "鲁班",
          price: 2200,
          num: 1,
          checked: false,
        },
      ],
      arr: [],
      arrRandom: [],
    };
  },
  components: {
    ZuoYe1,
    MySubject,
    MyFlag,
  },
  methods: {
    del(name) {
      const index = this.goodList.findIndex((item) => item.name == name);
      this.goodList.splice(index, 1);
    },
    all(name, flag) {
      this.goodList.find((item) => item.name === name).checked = flag;
    },
  },
  computed: {
    isAll: {
      get() {
        return this.goodList.every((item) => item.checked === true);
      },
      set(val) {
        return this.goodList.forEach((item) => (item.checked = val));
      },
    },
    total() {
      const arr = this.goodList.filter((item) => item.checked === true);
      return arr.reduce((sum, item) => sum + item.num * item.price, 0);
    },
  },
};
</script>

<style>
body {
  background-color: #eee;
}

#app {
  background-color: #fff;
  width: 500px;
  margin: 50px auto;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  padding: 2em;
}
</style>
